<template>
  <div class="project">
    <div class="year">
      <span>年份：</span>
      <div v-for="(item, index) in yearList" :key="index">
        <div
          class="year-item"
          :class="{
            active: currentYear === index
          }"
          @click="clickYear(index)"
        >
          <!-- disabled: isView && yearList[index] > todayYear -->
          {{ item }}
        </div>
      </div>
    </div>

    <div
      v-for="(item, index) in basicFormList"
      :key="index"
    >
      <el-form
        :model="item"
        label-position="top"
        :rules="basicRules"
        :ref="'basicFormRef' + index"
        v-show="currentYear === index"
      >
        <!-- 目标完成情况 -->
        <div class="project-part">
          <div class="project-part-title">目标完成情况</div>
          <!-- :rules="basicRules.wctz"  :prop="'basicFormList['+index+'].wctz'" -->
          <div class="project-part-content">
            <el-row :gutter="24">
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="完成投资"
                  :rules="basicRules.wctz"
                  prop="wctz"
                >
                  <el-input
                    v-model="item.wctz"
                    :disabled="
                      getEnterpriseDisabled(index, 'wctz')
                    "
                    @blur="inputToNumber(item.wctz)"
                  >
                    <template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="完成形象进度">
                  <el-input
                    type="textarea"
                    v-model="item.wcxxjd"
                    :disabled="
                      getEnterpriseDisabled(index, 'wcxxjd')
                    "
                    :rows="4"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- 资金情况 -->
        <div class="project-part">
          <div class="project-part-title">资金情况</div>
          <div class="project-part-content">
            <el-row :gutter="24">
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="财政出资" prop="czcz">
                  <el-input
                    v-model="item.czcz"
                    :disabled="
                      getEnterpriseDisabled(index, 'czcz')
                    "
                    @blur="inputToNumber(item.czcz)"
                  >
                    <template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="其他出资" prop="qtcz">
                  <el-input
                    v-model="item.qtcz"
                    :disabled="
                      getEnterpriseDisabled(index, 'qtcz')
                    "
                    @blur="inputToNumber(item.qtcz)"
                  >
                    <template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- 截至去年底累计建成规模情况 -->
        <div class="project-part">
          <div class="project-part-title">
            截至{{
              yearList[currentYear] - 1
            }}年底累计建成规模情况
          </div>
          <div class="project-part-content">
            <el-row :gutter="24">
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="道路" prop="dl">
                  <el-input
                    v-model="item.dl"
                    :disabled="
                      getAdminDisabled(index, 'dl')
                    "
                    @blur="inputToNumber(item.dl)"
                  >
                    <template slot="append"
                      >万平方米</template
                    >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="景观" prop="jg">
                  <el-input
                    v-model="item.jg"
                    :disabled="
                      getAdminDisabled(index, 'jg')
                    "
                    @blur="inputToNumber(item.jg)"
                  >
                    <template slot="append"
                      >万平方米</template
                    >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="房建" prop="fj">
                  <el-input
                    v-model="item.fj"
                    :disabled="
                      getAdminDisabled(index, 'fj')
                    "
                    @blur="inputToNumber(item.fj)"
                  >
                    <template slot="append"
                      >万平方米</template
                    >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="综合管廊" prop="zhgl">
                  <el-input
                    v-model="item.zhgl"
                    :disabled="
                      getAdminDisabled(index, 'zhgl')
                    "
                    @blur="inputToNumber(item.zhgl)"
                  >
                    <template slot="append"
                      >万平方米</template
                    >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- 截至去年底累计建成管线长度 -->
        <div class="project-part">
          <div class="project-part-title">
            截至{{
              yearList[currentYear] - 1
            }}年底累计建成管线长度
          </div>
          <div class="project-part-content">
            <el-row :gutter="24">
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="电力通道" prop="dltd">
                  <el-input
                    v-model="item.dltd"
                    :disabled="
                      getAdminDisabled(index, 'dltd')
                    "
                    @blur="inputToNumber(item.dltd)"
                  >
                    <template slot="append">千米</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="供水管网" prop="gsgw">
                  <el-input
                    v-model="item.gsgw"
                    :disabled="
                      getAdminDisabled(index, 'gsgw')
                    "
                    @blur="inputToNumber(item.gsgw)"
                  >
                    <template slot="append">千米</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="排水管网" prop="psgw">
                  <el-input
                    v-model="item.psgw"
                    :disabled="
                      getAdminDisabled(index, 'psgw')
                    "
                    @blur="inputToNumber(item.psgw)"
                  >
                    <template slot="append">千米</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="燃气管网" prop="rqgw">
                  <el-input
                    v-model="item.rqgw"
                    :disabled="
                      getAdminDisabled(index, 'rqgw')
                    "
                    @blur="inputToNumber(item.rqgw)"
                  >
                    <template slot="append">千米</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="通讯管网" prop="txgw">
                  <el-input
                    v-model="item.txgw"
                    :disabled="
                      getAdminDisabled(index, 'txgw')
                    "
                    @blur="inputToNumber(item.txgw)"
                  >
                    <template slot="append">千米</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { isAdmin, isEnterprise } from '@/utils/permission'
import { float } from '@/utils/formrule'

export default {
  props: {
    yearList: Array,
    isSaveClick: Boolean,
    detailInfo: Array,
    projectStatus: String,
    isView: Boolean,
    bpmStatus: String
  },
  data() {
    return {
      currentYear: 0,
      basicFormList: [],
      basicForm: '',
      typeOptions: [],
      checkStatus: '0',
      basicRules: {
        wctz: [float],
        czcz: [float],
        qtcz: [float],
        dl: [float],
        jg: [float],
        fj: [float],
        zhgl: [float],
        dltd: [float],
        gsgw: [float],
        psgw: [float],
        rqgw: [float],
        txgw: [float]
      },
      hasValuePageIndexs: [],
      lastedPageIndex: -1
    }
  },
  watch: {
    yearList(val) {
      if (val.length) {
        if (this.basicFormList.length === 0) {
          this.basicFormList = val.map((item) => {
            return {
              projectId: '',
              wctz: '',
              wcxxjd: '',
              czcz: '',
              qtcz: '',
              dl: '',
              jg: '',
              fj: '',
              zhgl: '',
              dltd: '',
              gsgw: '',
              psgw: '',
              rqgw: '',
              txgw: '',
              year: item
            }
          })
        } else {
          const oldYearInfo = JSON.parse(
            JSON.stringify(this.basicFormList)
          )
          this.basicFormList = []
          val.forEach((item) => {
            const oldVal = oldYearInfo.find(
              (info) => info.year === item
            )
            if (oldVal === undefined) {
              this.basicFormList.push({
                projectId: '',
                wctz: '',
                wcxxjd: '',
                czcz: '',
                qtcz: '',
                dl: '',
                jg: '',
                fj: '',
                zhgl: '',
                dltd: '',
                gsgw: '',
                psgw: '',
                rqgw: '',
                txgw: '',
                year: item
              })
            } else {
              this.basicFormList.push(oldVal)
            }
          })
        }
      }
    },
    isSaveClick() {
      let result = true
      this.basicFormList.map((item, index) => {
        this.$refs[`basicFormRef${index}`][0].validate(
          (valid) => {
            if (valid) {
            } else {
              result = false
              return false
            }
          }
        )
      })
      result
        ? this.$emit(
            'setNdmbjhList',
            this.basicFormList,
            true
          )
        : this.$emit(
            'setNdmbjhList',
            this.basicFormList,
            false
          )
      // this.$emit('setNdmbjhList', this.basicFormList, true)
    },
    detailInfo(val) {
      if (val.length) {
        this.basicFormList = JSON.parse(
          JSON.stringify(this.detailInfo)
        )
        const keyList = [
          'czcz',
          'dl',
          'dltd',
          'fj',
          'gsgw',
          'jg',
          'psgw',
          'qtcz',
          'rqgw',
          'txgw',
          'wctz',
          'wcxxjd',
          'zhgl'
        ]
        for (
          let index = 0;
          index < this.detailInfo.length;
          ++index
        ) {
          const item = this.detailInfo[index]
          for (let key of keyList) {
            if (item[key]) {
              this.lastedPageIndex = index
              this.hasValuePageIndexs.push(index)
              break
            }
          }
        }
      }
    },
    projectStatus(val) {
      this.checkStatus = val
    }
  },
  computed: {
    todayYear() {
      return new Date().getFullYear()
    },
    todayMonth() {
      return new Date().getMonth()
    }
  },
  mounted() {},
  methods: {
    // 管理员禁用情况：
    // 1.详情
    // 2.管理员账号 && 新增
    // 3.审核完成状态 && 企业账号 && 数据不为空
    getAdminDisabled(index, key) {
      if (
        this.isView ||
        (isAdmin() && this.checkStatus === '0')
        // ||
        // (isEnterprise() &&
        //   this.bpmStatus === '3' &&
        //   this.hasValuePageIndexs.indexOf(index) !== -1)
        //    ||
        // (isEnterprise() &&
        //   this.bpmStatus === '4' &&
        //   index !== this.lastedPageIndex)
        // this.detailInfo[index][key] !== '' &&
        // this.detailInfo[index][key] !== null &&
        // this.detailInfo[index][key] !== undefined)
      ) {
        return true
      } else {
        return false
      }
    },
    // 企业禁用情况：
    // 1.详情
    // 2.企业账号
    // 3.审核完成状态 && 企业账号 && 数据不为空
    getEnterpriseDisabled(index, key) {
      if (
        this.isView ||
        isEnterprise()
        // ||
        // (isEnterprise() &&
        //   this.bpmStatus === '3' &&
        //   this.hasValuePageIndexs.indexOf(index) !== -1)
        // this.detailInfo[index][key] !== '' &&
        // this.detailInfo[index][key] !== null &&
        // this.detailInfo[index][key] !== undefined)
      ) {
        return true
      } else {
        return false
      }
    },
    clickYear(index) {
      // if (
      //   this.isView &&
      //   this.yearList[index] > this.todayYear
      // ) {
      //   this.$message.warning('不可查看未到年份')
      //   return
      // }
      this.currentYear = index
    },

    // 输入内容转化为数字
    inputToNumber(value) {
      value = Number(value) ? Number(value) : ''
      return value
    }
  }
}
</script>

<style scoped lang="scss">
.project {
  &-part {
    margin-top: 20px;

    &-title {
      margin: 10px 0 30px 15px;
      line-height: 18px;
      font-size: 16px;

      &::before {
        content: '';
        width: 6px;
        height: 18px;
        background: url('~@/assets/images/wisdom-construction/title-pre.png');
        position: absolute;
        left: 0;
        top: 10;
      }
    }

    &-content {
      padding-left: 10px;
    }
  }
}

.year,
.month {
  display: flex;
  margin-top: 10px;
  font-size: 14px;
  line-height: 28px;

  &-item {
    width: 66px;
    height: 28px;
    background: #f6f9fc;
    border: 1px solid #ebf1f8;
    margin-right: 15px;
    text-align: center;
    cursor: pointer;
    line-height: 28px;
    font-size: 14px;

    &.active {
      color: #00baff;
      border: 1px solid #00baff;
    }
    &.disabled {
      background: #e8eff7;
      color: #000000ba;
    }
  }
}

.suffix {
  position: absolute;
  left: -120px;
  width: 100px;
  text-align: center;
}

::v-deep {
  .el-form-item__label {
    height: 30px;
    // margin-left: 15px;
    margin-top: -20px;
  }

  .el-select {
    width: 100%;
  }

  .el-input__inner {
    width: 320px !important;
  }
  .el-textarea__inner {
    width: 320px !important;
  }
}
</style>
